<template>
<div>
  <header>
    <div><p class="safe-color"></p>正常巡检</div>
    <div><p class="danger1-color"></p>离线巡检</div>
    <div><i class="el-icon-time"></i>停留时间</div>
    <div><span class="danger-color"></span>应巡检点</div>
    <div><span class="safe1-color"></span>已巡检点</div>
    <div><span class="warning-color"></span>隐患点</div>
  </header>
  <div id="mapDiv" class="mapDiv" ref="mapDiv">
  </div>
</div>
</template>

<script>
import runImg from '@/assets/run.png'
import safeDot from '@/assets/safe.png'
import dangerDot from '@/assets/danger.png'
import BaiduMap from '@/common/js/baidu-map'
// import {getCity} from '@/api/remote'
// import BMap from 'BMap'

export default {
  data() {
    return {
      runImg: runImg,
      safeDot: safeDot,
      dangerDot: dangerDot,
      zoom: '11',
      T: '',
      lay: '',
      map: '',
      lnglats: [], // 经纬度数据
      onLinePoint: [],
      offLinePoint: [],
      centerValue: {
        maxLon: '',
        minLon: '',
        maxLat: '',
        minLat: ''
      }
    }
  },
  created() {
    this.getLatLon()
  },
  mounted() {
    this.getPosition()
  },
  watch: {
    '$route': 'getPosition'
  },
  methods: {
    getLatLon() {
      this.lnglats = [// 后台获取经纬度点
        { 'lon': '103.79638', 'lat': '36.06388', 'PName': '1111', 'Status': 1 },
        { 'lon': '103.812390', 'lat': '36.068800', 'PName': '2222', 'Status': 1 },
        { 'lon': '103.819260', 'lat': '36.056180', 'PName': '3333', 'Status': 1 },
        { 'lon': '103.801570', 'lat': '36.048680', 'PName': '第四个点', 'Status': 1 },
        { 'lon': '103.801570', 'lat': '36.048680', 'PName': '第四个点', 'Status': 0 },
        { 'lon': '103.79638', 'lat': '36.06388', 'PName': '第五个点', 'Status': 0 }
      ]
      this.centerValue = {
        maxLon: this.lnglats[0].lon,
        minLon: this.lnglats[0].lon,
        maxLat: this.lnglats[0].lat,
        minLat: this.lnglats[0].lat
      }
    },
    setZoomLevel(maxJ, minJ, maxW, minW) { // 设置缩放级别
      if (maxJ === minJ && maxW === minW) return 13
      var diff = maxJ - minJ
      if (diff < (maxW - minW) * 2.1) diff = (maxW - minW) * 2.1
      diff = parseInt(10000 * diff) / 10000
      var zoomArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
      var diffArr = [180, 90, 45, 22, 11, 5.5, 2.75, 1.37, 0.68, 0.34, 0.17, 0.08, 0.04]
      for (var i = 0; i < diffArr.length; i++) {
        if ((diff - diffArr[i]) >= 0) {
          return zoomArr[i]
        }
      }
      return 14
    },
    setCenterPoint() { // 设置中心点和级别
      this.lnglats.forEach(val => {
        if (val.lon >= this.centerValue.maxLon) this.centerValue.maxLon = val.lon
        if (val.lon <= this.centerValue.maxLon) this.centerValue.minLon = val.lon
        if (val.lat >= this.centerValue.maxLat) this.centerValue.maxLat = val.lat
        if (val.lat <= this.centerValue.minLat) this.centerValue.minLat = val.lat
        if (val.Status === 1) {
          this.onLinePoint.push(new this.T.LngLat(val.lon, val.lat))
        }
        if (val.Status === 0) {
          this.offLinePoint.push(new this.T.LngLat(val.lon, val.lat))
        }
      })
      this.centerValue.meanValLon = ((parseFloat(this.centerValue.maxLon) + parseFloat(this.centerValue.minLon)) / 2).toFixed(2)
      this.centerValue.meanValLat = ((parseFloat(this.centerValue.maxLat) + parseFloat(this.centerValue.minLat)) / 2).toFixed(2)
      this.zoom = this.setZoomLevel(this.centerValue.maxLon, this.centerValue.minLon, this.centerValue.maxLat, this.centerValue.minLat)
      console.log(this.zoom + '-----------------------')
      // console.log(this.centerValue.maxLon)
      // console.log(this.centerValue.maxLat)
      // console.log(this.centerValue.meanValLon)
      // console.log(this.centerValue.meanValLat)
    },
    setPatrolPoint() {
      // 创建图片对象
      var icon = new this.T.Icon({
        iconUrl: this.runImg,
        iconSize: new this.T.Point(60, 60),
        iconAnchor: new this.T.Point(33, 50)
      })
      var icon1 = new this.T.Icon({
        iconUrl: this.safeDot,
        iconSize: new this.T.Point(30, 30),
        iconAnchor: new this.T.Point(15, 15)
      })
      var icon2 = new this.T.Icon({
        iconUrl: this.dangerDot,
        iconSize: new this.T.Point(30, 30),
        iconAnchor: new this.T.Point(15, 15)
      })
      this.lnglats.forEach((val, index) => {
        if (index === 0) {
          var marker = new this.T.Marker(new this.T.LngLat(val.lon, val.lat), { icon: icon })
          this.map.addOverLay(marker) // 增加点
        } else {
          var marker1 = new this.T.Marker(new this.T.LngLat(val.lon, val.lat), { icon: icon1 })
          this.map.addOverLay(marker1) // 增加点
          var infoWin1 = new this.T.InfoWindow()
          var sContent =
                "<div style='margin:0px;'>" +
                  '<div>巡检员：<span>王某</span></div>' +
                  '<div>所在位置：<span>' + val.PName + '</span></div>' +
                '</div>'
          infoWin1.setContent(sContent)
          marker1.addEventListener('mouseover', function() {
            marker1.openInfoWindow(infoWin1)
          })// 将标注添加到地图中
          marker1.addEventListener('mouseout', function() {
            marker1.closeInfoWindow(infoWin1)
          })
        }
        // 将标注添加到地图中
      })
      var marker2 = new this.T.Marker(new this.T.LngLat(103.819080, 36.046050), { icon: icon2 }) // 创建点
      // this.map.addOverLay(marker) // 增加点
      // this.map.addOverLay(marker1)
      this.map.addOverLay(marker2)
    },
    getPosition() {
      BaiduMap.init().then((T) => {
        this.T = T
        // this.zoom = 12
        this.setCenterPoint()

        // var imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' +
        //         'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
        //         '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
        // // 创建自定义图层对象
        // this.lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
        // var config = { layers: [this.lay] }
        this.map = new T.Map(this.$refs.mapDiv)// 初始化地图对象, config
        this.map.centerAndZoom(new T.LngLat(this.centerValue.meanValLon, this.centerValue.meanValLat), this.zoom)// 设置显示地图的中心点和级别
        // 创建对象
        var ctrl = new T.Control.MapType()
        // 添加控件
        this.map.addControl(ctrl)
        this.setPatrolPoint()
        // 创建线对象
        var line = new T.Polyline(this.onLinePoint, { color: '#46962a', opacity: 1 })
        var line2 = new T.Polyline(this.offLinePoint, { color: '#ed5565', opacity: 1 })
        // line.setColor('#f00')
        // 向地图上添加线
        this.map.addOverLay(line)
        this.map.addOverLay(line2)
      }).catch(error => {
        console.log(error)
      })
    }

  }
}
</script>

<style scoped lang="scss">
@import '~@/styles/color.scss';
.mapDiv{
  width: 100%;
  height: 78vh;
}
.safe-color{
  background-color: $safety-color;
}
.safe1-color{
  background-color: $safety1-color;
}
.danger-color{
  background-color: $danger-color;
}
.danger1-color{
  background-color: $danger-color;
}
.warning-color{
  background-color: $warning-color;
}
header{
  display: flex;
  justify-content: flex-start;
  padding: 10px 15px;
  font-size: 14px;
  div{
    margin-right:5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    p{
      display: block;
      width: 15px;
      height: 3px;
      margin-right: 5px;
    }
    i{
      margin-right: 5px;
    }
    span{
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      margin-right: 5px;
    }
  }
}
</style>
